<template>
	<view class="content-video">
		<view class="video-k">
			<video id="myVideo" ref="video1" :src="imgurl+activityDet.videoTutorial" loop=true controls
				style="width: 100%;height: 500rpx;"></video>
		</view>
		<view class="content-nr">
			<view class="content-title">
				{{activityDet.label}}
			</view>


			<view class="content-rule-title">
				运动规则
			</view>
			<view class="content-rule-text">
				{{activityDet.rule}}

				<!-- <mp-html :content="activityDet.rule" /> -->
			</view>
			<view class="content-rule-title">
				运动目的
			</view>
			<view class="content-rule-text">
				{{activityDet.sportPoint}}
				<!-- <mp-html :content="activityDet.sportPoint" /> -->
			</view>
		</view>

		<view class="foor-k">
			<view class="foor-bt" @click="gouplote">
				去运动
			</view>
		</view>
		<!-- <view class="foor-k">
		<view class="foor-tjorck">
			<u-button type="info" :plain="true" @click="gouplote">重新拍摄</u-button>
			<u-button type="primary" :plain="true" >查看</u-button>
			<u-button type="primary"  >提交</u-button>
			
		</view>
		</view> -->
		<u-popup v-model="failshow" mode="center" border-radius="35" @close="failclose" @open="failopen"
			:closeable="true" :overlay="true">
			<view class="fail-k">
				<view class="fail-title">
					温馨提示
				</view>
				<view class="fail-content">
					您已参与过活动，且积分已发放
				</view>
				<view class="fail-bt">
					查看积分
				</view>
			</view>
		</u-popup>
		<u-popup v-model="noinshow" mode="center" border-radius="35" @close="failclose" @open="failopen"
			:closeable="true" :overlay="true">
			<view class="fail-k">
				<view class="fail-title">
					对不起暂无活动资格
				</view>
				<view class="fail-content">
					请联系客服咨询
				</view>
				<view class="fail-bt" @click="gohome">
					首页
				</view>
			</view>
		</u-popup>
		<u-popup v-model="norsshow" mode="center" border-radius="35" @close="failclose" @open="failopen"
			:closeable="true" :overlay="true">
			<view class="fail-k">
				<view class="fail-title">
					温馨提示
				</view>
				<view class="fail-content">
					活动人数已满
				</view>
				<view class="fail-bt" @click="gohome">
					首页
				</view>
			</view>
		</u-popup>
		<u-popup v-model="gameshow" mode="center" border-radius="35" @close="gameclose" :closeable="true"
			:overlay="true">
			<view class="fail-k">
				<view class="fail-title">
					活动结束感谢您的参与
				</view>
				<view class="fail-content">
					积分已到账，请注意查收
				</view>
				<view class="fail-bt" @click="goshop">
					进入商城
				</view>
			</view>
		</u-popup>

		<u-popup v-model="sbshow" mode="center" border-radius="35" @close="closesb" :closeable="true" :overlay="true">
			<view class="fail-k">
				<view class="fail-title">
					提示
				</view>
				<view class="fail-content">
					未能识别到肢体动作，请重新上传
				</view>
				<view class="fail-bt" @click="gouplote">
					重新上传
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	// import uniWebview from '@dcloudio/vue-cli-plugin-uni/packages/uni-ui/lib/uni.webview.js';
	import AuthorizationPopup from "@/components/AuthorizationPopup/index";
	import {
		mapGetters
	} from "vuex";
	import {
		BASE_URL_IMAHE,
		BASE_URL
	} from "../../../utils/https";
	import {
		getActivityDetails,
		beginActivity
	} from "@/api/index/index";
	import {
		uploadVideo
	} from "@/api/upload/index";


	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? uni.getSystemInfoSync().statusBarHeight + "px" :
		"30rpx";


	let app = getApp();
	export default {
		name: "index.vue",
		// computed: mapGetters(["isLogin"]),
		components: {
			AuthorizationPopup,
		},

		onLoad(options) {
			this.urlquery = options
			var sjs = this.randomWord()
			var datatime = Date.parse(new Date());
			var tokens = '' + sjs + '' + datatime
			this.token = tokens
			// console.log(getCurrentPages().length)
			if (!options.activityId) {
				// 跳转回原页面
				if (getCurrentPages().length == 1) {
					uni.reLaunch({
						url: "/pages/index/index"
					})
				} else {
					uni.navigateBack({
						delta: 1,
					});
				}


			} else {
				this.form.activityId = options.activityId

				// if(uni.getStorageSync("type")=="chess"){
				this.form.userRef = uni.getStorageSync("userRef")
				// }
				// if(uni.getStorageSync("type")=="sport"){
				// 		  this.form.userRef=uni.getStorageSync("usersportRef")	
				// }



				this.getlist()
			}



		},
		/**
		 * 分享当前页面
		 */
		onShareAppMessage(e) {
			return {
				title: "一个兴趣社交购物平台",
				imageUrl: BASE_URL_IMAHE +
					"file/test/productImage/20230710/285ce91ce9774534b5c57947ca7c96c9.jpg",
				path: `/pages/index/index?parentInviteCode=${
	        uni.getStorageSync("phoneNumber") || ""
	      }`,
			};
		},
		onShow() {

			let self = this;
			this.listPage();
			// if (uni.getStorageSync("token")) {
			//   this.$refs.authRef.cancel();
			// }
			// setTimeout(() => {
			//   if (!uni.getStorageSync("token") && !uni.getStorageSync("modal")) {
			//     //第一次进入弹窗
			//     this.$refs.authRef.showToggle();
			//     uni.setStorageSync("modal", true);
			//   }
			// }, 1000);


			// this.getShopPingApi();

		},
		data() {
			return {
				loading: true,
				imgurl: BASE_URL_IMAHE,
				token: '',
				navIndex: 0,
				sbshow: false,
				checked: false,
				failshow: false,
				noinshow: false,
				gameshow: false,
				norsshow: false,
				jnshow: false,
				form: {
					userRef: "",
					activityId: "",
				},
				shuoming: "",
				activityDet: {},
				resbeginActivity: {},
				inpayimg: "",
				codeimg: "",
				imgshow: false,
				videoUrl: '',
				urlquery: {},
				sportPoint: "",

			};

		},
		//上拉
		onReachBottom() {
			console.log("触发上拉加载");
			// this.getShopPingApi();
		},
		methods: {
			closesb() {
				this.sbshow = false
			},
			goshop(url) {
				window.location.href = this.resbeginActivity.activity.jumpShopLink
			},

			async gouplote() {

				uni.navigateTo({
					url: "/pages/sportvideo/index?activityId=" + this.resbeginActivity.activity.id +
						"&whiteListId=" + this.resbeginActivity.activity.whiteListId +
						"&joinRecordId=" + this.resbeginActivity.activity.joinRecordId + "&actionId=" + this
						.urlquery.actionId
				})
				return
				// this.startRecording()
				// return


				this.sbshow = false
				var data = {
					activityId: this.resbeginActivity.activity.id,
					whiteListId: this.resbeginActivity.activity.whiteListId,
					joinRecordId: this.resbeginActivity.activity.joinRecordId,
					userRef: this.form.userRef,
					token: this.token
				}
				let that = this
				uni.chooseVideo({
					sourceType: ['camera'],
					camera: 'front',
					maxDuration: that.resbeginActivity.activity.sportDuration ? that.resbeginActivity.activity
						.sportDuration : 30,
					success: async res => {
						console.log(res, res.tempFile)
						uni.showLoading({
							mask: true,
							title: '上传提交中'
						})

						uni.uploadFile({
							url: BASE_URL + '/uploadVideo', //仅为示例，非真实的接口地址
							filePath: res.tempFilePath,
							name: 'file',
							formData: data,
							success: (uploadFileRes) => {
								console.log(uploadFileRes)
								var rest = JSON.parse(uploadFileRes.data)
								if (rest.result == 0) {
									uni.hideLoading()
									that.gameshow = true
								}
								if (rest.result == -102) {

									uni.hideLoading()
									var sjs = that.randomWord()
									var datatime = Date.parse(new Date());
									var tokens = '' + sjs + '' + datatime
									that.token = tokens
									that.sbshow = true
								}


							},
							fail: (failres) => {
								uni.hideLoading()
								var sjs = that.randomWord()
								var datatime = Date.parse(new Date());
								var tokens = '' + sjs + '' + datatime
								that.token = tokens
							}
						});


					},
					fail: resfail => {
						console.log(resfail)
						uni.showToast({
							icon: "none",
							title: "上传失败，请重试。"
						})
					}
				})

			},
			async getlist() {
				// uni.showLoading({
				// 	title:"加载中",
				// })
				this.inpayimg = null
				const resbeginActivity = await beginActivity(JSON.stringify(this.form))
				this.resbeginActivity = resbeginActivity



				const res = await getActivityDetails(JSON.stringify(this.form))
				this.videoUrl = res.activity.videoTutorial
				this.codeimg = res.activity.coverImg
				this.shuoming = res.activity.rule
				this.inpayimg = res.activity.posterBackdropImg
				app.globalData.data.inpayimg = this.inpayimg
				res.actionList.forEach((item, index) => {
					if (item.id == this.urlquery.actionId) {
						this.activityDet = item
					}
				})
				this.sportPoint = res.activity.sportPoint



				this.imgshow = true
				console.log(resbeginActivity.result, "resbeginActivity.result")
				if (resbeginActivity.result == -100) {
					// -100 不在活动白名单
					this.noinshow = true

				} else if (resbeginActivity.result == -101) {
					// -101 已参与活动
					this.failshow = true

				} else if (resbeginActivity.result == -102) {
					// -101 已参与活动
					this.norsshow = true

				} else if (resbeginActivity.result == 0) {

				} else {
					uni.showToast({
						title: resbeginActivity.message,
						icon: "error",
					})
					setTimeout(() => {
						if (getCurrentPages().length == 1) {
							uni.reLaunch({
								url: "/pages/home/index"
							})
						} else {
							uni.navigateBack({
								delta: 1,
							});
						}
					}, 1500)

				}

			},
			jnshowfun() {
				this.jnshow = true
			},
			failclose() {
				if (getCurrentPages().length == 1) {
					uni.reLaunch({
						url: "/pages/home/index"
					})
				} else {
					uni.navigateBack({
						delta: 1,
					});
				}
			},
			failopen() {

			},
			gohome() {
				uni.reLaunch({
					url: "/pages/home/index"
				})
			},
			imgonload() {



				this.loading = false
				uni.hideLoading();
			},
			async inhome() {
				if (!this.checked) {
					uni.showToast({
						icon: 'none',
						title: "请阅读并勾选用户协议"
					})
					return
				}
				if (this.resbeginActivity.result == -100) {
					// -100 不在活动白名单
					this.noinshow = true

				} else if (this.resbeginActivity.result == -101) {
					// -101 已参与活动
					this.failshow = true

				} else if (this.resbeginActivity.result == 0) {
					uni.navigateTo({
						url: `/pages/pay/index?activityId=${this.resbeginActivity.activity.id}&whiteListId=${this.resbeginActivity.activity.whiteListId}&joinRecordId=${this.resbeginActivity.activity.joinRecordId}`
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: "error",
					})
					setTimeout(() => {
						if (getCurrentPages().length == 1) {
							uni.reLaunch({
								url: "/pages/index/index"
							})
						} else {
							uni.navigateBack({
								delta: 1,
							});
						}
					}, 1500)

				}

			},
			async listPage() {


				// setTimeout(()=>{

				// },5000)

				// Promise.all([ this.getShopPingApi()]).finally(
				//   () => (this.loading = false)
				// );

			},
			randomWord() {
				var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
					'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c',
					'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w',
					'x', 'y', 'z'
				];
				var nums = "";
				for (var i = 0; i < 20; i++) {
					var id = parseInt(Math.random() * 61);
					nums += chars[id]
				}
				return nums;
			},


		},
	};
</script>

<style lang="scss" scoped>
	.content-video {
		width: 100%;

		.video-k {
			width: 100%;
			height: 500rpx;

			video {
				width: 100%;
				height: 500rpx;
			}
		}

		.content-nr {

			padding: 0 20rpx;
			padding-bottom: 200rpx;

			.content-title {
				padding-top: 30rpx;
				font-size: 36rpx;
				font-weight: bold;
			}

			.content-rule-title {
				text-align: center;
				padding-top: 50rpx;
				font-size: 36rpx;
				font-weight: bold;
			}

			.content-rule-text {
				margin-top: 60rpx;
				white-space: pre-wrap;
				line-height: 45rpx;

			}
		}

		.foor-k {
			width: 100%;
			position: fixed;
			left: 0rpx;
			bottom: 0rpx;
			padding-bottom: 50rpx;
			padding-top: 30rpx;
			background: #FFFFFF;
		}

		.foor-bt {
			width: 680rpx;
			height: 80rpx;
			border-radius: 15rpx;
			background-color: #ff5500;
			font-size: 30rpx;
			color: #ffffff;
			font-weight: bold;
			line-height: 80rpx;
			text-align: center;
			margin: 0 auto;
		}

		.foor-tjorck {
			margin: 0 auto;
			width: 600rpx;
			display: flex;
			justify-content: space-between;
		}
	}

	// 弹框
	.fail-k {
		width: 490rpx;
		height: 405rpx;
		text-align: center;

		.fail-title {
			padding-top: 120rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #111827;
		}

		.fail-content {
			margin-top: 29rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #718096;
		}

		.fail-bt {
			margin: 55rpx auto 0rpx;
			width: 328rpx;
			height: 64rpx;
			background-color: #292c34;
			color: #ffffff;
			border-radius: 35rpx;
			line-height: 64rpx;

		}

	}

	.jnshow-k {
		width: 650rpx;
		height: auto;
		padding-bottom: 40rpx;

		.jnshow-title {
			padding-top: 50rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #111827;
		}

		.jnshow-content {
			margin-top: 29rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #718096;
			padding: 0 20rpx;
			white-space: pre-wrap;
			text-align: left;
		}
	}

	.po-k {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>